<!-- 列表页弹出的 info 展示页 -->
<template>
    <el-scrollbar class="vue-box" style="width: 900px;">
        <div class="submit-box--dialog">
            <div class="c-card">
                <el-form :inline="false" label-width="8em">
                    <show-info name="用户id：">{{ state.model.id }}</show-info>
                    <show-info name="用户昵称：">{{ state.model.name }}</show-info>
                    <show-info name="用户年龄：">{{ state.model.age }}</show-info>
                    <show-info name="日期展示：">{{ sa.forDate(state.model.createTime) }}</show-info>
                    <show-info name="日期时间：">{{ sa.forDate(state.model.createTime, 2) }}</show-info>
                    <show-info name="多行文本：">{{ state.model.intro }}</show-info>
                    <show-info name="普通文本：" type="text" :value="state.model.name"></show-info>
                    <show-info name="显示颜色：" type="color" :value="state.model.color"></show-info>
                    <show-info name="评分组件：" type="rate" :value="state.model.rate"></show-info>
                    <show-info name="个人余额：" type="money" :value="state.model.money"></show-info>
                    <show-info name="钱单位分：" type="money-f" :value="state.model.moneyFen"></show-info>
                    <show-info name="图片展示：" type="img" :value="state.model.img"></show-info>
                    <show-info name="展示音频：" type="audio" :value="state.model.audio"></show-info>
                    <show-info name="展示视频：" type="video" :value="state.model.video"></show-info>
                    <show-info name="展示文件：" type="file" :value="state.model.file"></show-info>
                    <show-list name="图片列表：" type="img-list" :value="state.model.imgList"></show-list>
                    <show-list name="音频列表：" type="audio-list" :value="state.model.audioList"></show-list>
                    <show-list name="视频列表：" type="video-list" :value="state.model.videoList"></show-list>
                    <show-list name="文件列表：" type="file-list" :value="state.model.fileList"></show-list>
                    <show-list name="图视结合：" type="img-video-list" :value="state.model.imgVideoList"></show-list>
                    <show-list name="文本列表：" type="text-list" :value="state.model.textList"></show-list>
                    <show-info name="富文本块：" type="rich-text" :value="state.model.content"></show-info>
                    <show-enum name="枚举展示：" :value="state.model.status" :jv="{1: '正常[green]', 2: '禁用[red]'}" br></show-enum>
                    <show-info name="展示链接：" type="link" :value="state.model.url"></show-info>
                </el-form>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="data-list-info">
import {getCurrentInstance, reactive} from "vue";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,  // 获取传值id 
    model: {    // 数据 Model
        id: prop.param.id || 0,  // 获取传值id 
        name: '刘沉香',
        age: 18,
        createTime: new Date(),
        intro: '庄子说，人生天地之间，若白驹过隙，忽然而已。人生就是一场抵达，我们总以为来日方长... 庄子说，人生天地之间，若白驹过隙，忽然而已。人生就是一场抵达，我们总以为来日方长...',
        color: '#409eff',
        rate: 3,
        money: 1.01,
        moneyFen: 202,
        img: 'http://file.dev33.cn/ssp/ssp-logo-480.png',
        audio: 'http://file.dev33.cn/in-file/15998054742041893440109.mp3',
        video: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        file: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        imgList: 'http://file.dev33.cn/in-file/1599805642483567503625.jpg,http://file.dev33.cn/in-file/1599805642483567503625.jpg',
        audioList: 'http://file.dev33.cn/in-file/15998054742041893440109.mp3,http://file.dev33.cn/in-file/15998054742041893440109.mp3',
        videoList: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        fileList: 'http://file.dev33.cn/in-file/1599805482152468147415.mp4,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        imgVideoList: 'http://file.dev33.cn/in-file/1599805642483567503625.jpg,http://file.dev33.cn/in-file/1599805482152468147415.mp4',
        textList: '春眠不觉晓,处处闻啼鸟,夜来风雨声,花落知多少',
        content: '<p>第一段</p><p>第二段</p><p>第三段</p>',
        status: 1,
        url: 'https://gitee.com/dromara/sa-token'
    }
})

const onSubmit = () => {
    console.log('submit!', JSON.stringify(model))
};


</script>

<style scoped lang="scss">

</style>
